<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
    //209020347罗宋波
	body{
			background-color: black;
			margin: 0;
			padding: 0;
		}
		
    #character{
			position: absolute;
			top: 100px;
			left: 100px;
			width: 50px;
			height: 50px;
			background-image: url('img/player3.gif');
			background-size: cover;
			cursor: pointer;
		}
		#treasure{
			position: absolute;
			top: 300px;
			left: 500px;
			width: 50px;
			height: 50px;
			background-image: url('img/pet.gif');
			background-size: cover;
		}
</style>
  </head>
  <body>
	  
    <div id="character"></div>
	<div id="treasure"></div>
    <script>
// 角色状态
		var isTransformed = false;
// 监听鼠标双击事件
		$('#character').dblclick(function(){
			transformCharacter();
		});

		// 监听键盘事件
		$(document).keydown(function(event){
			switch(event.keyCode){
				case 65: // 左
					moveCharacter('left');
					break;
				case 87: // 上
					moveCharacter('up');
					break;
				case 68: // 右
					moveCharacter('right');
					break;
				case 83: // 下
					moveCharacter('down');
					break;
			}
		});
		// 角色移动
		function moveCharacter(direction){
			var character = $('#character');
			var currentPosition = character.position();
			var newPosition = {};
			switch(direction){
				case 'left':
					newPosition = {top: currentPosition.top, left: currentPosition.left - 50};
					character.css('background-image', 'url(' + (isTransformed ? 'img/playerbig_left.gif' : 'img/player_left.gif') + ')');
					break;
				case 'right':
					newPosition = {top: currentPosition.top, left: currentPosition.left + 50};
					character.css('background-image', 'url(' + (isTransformed ? 'img/playerbig_right.gif' : 'img/player_right.gif') + ')');
					break;
				case 'up':
					newPosition = {top: currentPosition.top - 50, left: currentPosition.left};
					character.css('background-image', 'url(' + (isTransformed ? 'img/player1_big.gif' : 'img/player1.gif') + ')');
					break;
				case 'down':
					newPosition = {top: currentPosition.top + 50, left: currentPosition.left};
					character.css('background-image', 'url(' + (isTransformed ? 'img/player1_big.gif' : 'img/player1.gif') + ')');
					break;
			}
			// 检查新位置是否超出屏幕边界
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    var characterWidth = character.width();
    var characterHeight = character.height();
    if(newPosition.left < 0 || newPosition.left > screenWidth - characterWidth || newPosition.top < 0 || newPosition.top > screenHeight - characterHeight){
        // 新位置超出屏幕边界，不执行移动操作
        return;
    }
			character.animate(newPosition, 200);
			checkTreasure();
		}

		// 角色变身
		function transformCharacter(){
			isTransformed = !isTransformed;
			var character = $('#character');
			character.css('background-image', 'url(' + (isTransformed ? 'img/player2.gif' : 'img/player3.gif') + ')');
		}
		// 检查是否找到宝箱
		function checkTreasure(){
			var character = $('#character');
			var treasure = $('#treasure');
			var characterPosition = character.position();
			var treasurePosition = treasure.position();
			var distanceX = Math.abs(characterPosition.left - treasurePosition.left);
			var distanceY = Math.abs(characterPosition.top - treasurePosition.top);
			if(distanceX < 50 && distanceY < 50){
				// 角色找到了宝箱
				alert('你找到了宝箱！');
				treasure.css('background-image', 'url(img/player_big.gif)');
			}
		}
</script>
  </body>
</html>
